<template>
  <router-view></router-view>
  <van-tabbar v-model="active" @change="onChange" class="footer">
    <van-tabbar-item name="/" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="/ft" icon="search">房态</van-tabbar-item>
    <van-tabbar-item name="/xx" icon="friends-o">消息</van-tabbar-item>
    <van-tabbar-item name="/mine" icon="setting-o">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  data() {
    return {
      active: "/",
    };
  },
  created() {
    this.active = this.$route.path;
  },
  watch: {
    "$route.path"() {
      this.active = this.$route.path;
    },
  },
  methods: {
    onChange(a) {
      this.$router.replace(a);
    },
  },
};
</script>
<style scoped>
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>
